<template>
	<view class="headJump">
		<view class="grey">
			<view :class="col==0?'boder_bu':''" @click="grounp">
				团课
			</view>
			<view :class="col==1?'boder_bu':''" @click="shi">
				私教
			</view>
		</view>
	</view>
	<GroupManag v-show="col==0?true:false"></GroupManag>
	<PersonlManag v-show="col==1?true:false"></PersonlManag>
</template>
<script>
	import PersonlManag from './PersonlManag/PersonlManag.vue'
	import GroupManag from './GroupManag/GroupManag.vue'
	export default {
		data() {
			return {
			col:1,
			}
		},
		methods: {
			//团课按钮
			grounp:function(){
				this.col=0
			},
			//私教按钮
			shi:function(){
				this.col=1
			}
		},
		components:{
			PersonlManag,
			GroupManag
		}
	}
</script>
<style lang="less">
	.headJump {
		display: flex;
		height: 150rpx;
		background-color: #F2F2F2;
		padding-bottom: 20rpx;
	}

	.headJump>view {
		flex: 1;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.headJump>view>view {
		width: 100rpx;
		height: 150rpx;
		line-height: 150rpx;
		text-align: center;
	}

	.headJump>view>view:first-child {
		margin-right: 20rpx;
	}
.grey{
	 color: #999d9c;
}
	.boder_bu {
		border-bottom: 2px solid #102b6a;
		color: black;
	}
</style>
